* {
  margin: 0;
  padding: 0;
}

html, body, .bg-hover, .content {
  width: 100%;
  height: 100%;
}

body {
  position: relative;
  line-height: 3em;
}

.bg-hover, .content {
  position: absolute;
  top: 0;
  left: 0;
}

.bg-hover {
  background-image: url('./timg.jpg');
  background-size: cover;
  filter: blur(8px) brightness(1.08);
}

.content {
  background: transparent;
  padding: 10px;
  box-sizing: border-box;
}

body {
  font-weight: 100;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

@animateColor1: #286d34;
@animateColor2: #f00;
@animateColor3: #7FDBFF;
@animateColor4: #F012BE;

.set-color-animation(@name,@color1,@color2) {
  @keyframes @name {
    from {
      color: @color1;
    }
    50% {
      color: @color2;
    }
    to {
      color: @color1;
    }
  }
}

.set-color-animation(header-text, @animateColor1, @animateColor2);
.set-color-animation(header-text2, @animateColor3, @animateColor4);

.header, .header2 {
  text-align: center;
}

.header {
  font-size: 32px;
  color: @animateColor2;
  animation: header-text 5s ease-in-out infinite;
}

.header2 {
  font-size: 26px;
  color: @animateColor3;
  animation: header-text2 5s ease-in-out infinite;
}

@text-shadow-color: #F93;
.says {
  list-style: none;
  -webkit-margin-before: 0em;
  -webkit-margin-after: 0em;
  -webkit-padding-start: 0px;
  li {
    text-align: center;
    line-height: 1.6em;
    text-shadow: 5px 1px 6px @text-shadow-color;
  }
}